<template>
  <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="题单名">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item v-show="isAdmin" label="排序">
      <el-input-number v-model="ruleForm.top" />
    </el-form-item>
    <!-- <el-form-item v-if="isAdmin" label="是否显示得分">
      <el-radio-group v-model="ruleForm.isdf">
        <el-radio :label="true">显示</el-radio>
        <el-radio :label="false">不显示</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <!-- <el-form-item v-if="isAdmin" label="首页展示">
      <el-radio-group v-model="ruleForm.purpose">
        <el-radio :label="undefined">不展示</el-radio>
        <el-radio label="能力测评">能力测评</el-radio>
        <el-radio label="赛前集训">赛前集训</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <el-form-item label="题单范围" v-if="isAdmin">
      <el-radio-group @change="change" v-model="ruleForm.usertype" disabled>
        <el-radio v-if="isAdmin" label="team">团队题单</el-radio>
        <el-radio v-if="isAdmin" label="public" disabled>公开题单， 所有人可见</el-radio>
        <el-radio label="user" disabled>个人题单，仅自己可见</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 可见范围-选择用户 -->
    <!-- <el-form-item v-if="isAdmin" v-show="ruleForm.usertype !== 'public'" label="请选择">
      <el-button v-if="ruleForm.usertype === 'user'" @click="dialogVisible2 = true">
        {{ ruleForm.userid ? (ruleForm.user ? ruleForm.user.name : "未选择用户") : "请选择用户" }} </el-button>
      <el-dialog title="请选择用户" v-model="dialogVisible2" width="900px" close-on-click-modal close-on-press-escape>
        <userVue :tablekey="['name', 'headportrait']" :userhandleCurrentChange="userhandleCurrentChangeuser"></userVue>
      </el-dialog>
    </el-form-item> -->

    <el-form-item label="题目编排"></el-form-item>
    <selectquestionVue v-model="ruleForm" :removeclick="removeclick" :addclick="addclick" :questionid="questionid"
      v-model:questionid="questionid" :change="changequestionid">
    </selectquestionVue>
    <table v-if="isAdmin" class="table table-bordered">
      <thead>
        <tr>
          <td>名称</td>
          <td class="text-center">类型</td>
          <td class="text-center">分值</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="element in questionid">
          <td>{{ element.name }}</td>
          <td class="text-center">
            <el-tag>{{ element.type }}</el-tag>
          </td>
          <td class="text-center">
            <el-input placeholder="请输入分值" v-model.number="element.df" style="width: 100px"></el-input>
          </td>
        </tr>
      </tbody>
    </table>
  </el-form>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { assign } from "underscore";
import { computed, onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { asyncgetmyquestionbank, asyncgetquestionbank } from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { Questionbank } from "../../data";
import selectquestionVue from "./selectquestion.vue";

const prop = defineProps<{ ID?: number | string, user: Studycodemodel.Iuser, isAdmin: boolean }>()
const router = useRouter()
const ruleForm = reactive<Studycodemodel.Iquestionbank>(assign({ usertype: "team" }, Questionbank))
const store = useStore(Storekey)
const getteam = computed(() => {
  return store.state.team?.rows.filter(e => {
    if (!e.allowquestion) return true
    if (e.userid === store.state.user?.ID) return true
    if (e.teamuser?.find(z => z.userid === store.state.user?.ID && z.isAdmin)) return true
    return false
  }) || []
})

async function start() {
  if (prop.ID) {
    if (prop.isAdmin) {
      const data = await asyncgetquestionbank({ ID: prop.ID });
      Object.assign(ruleForm, data);
    } else {
      const { rows, count } = await asyncgetmyquestionbank({ ID: prop.ID });
      if (count) {
        Object.assign(ruleForm, rows[0]);
      } else {
        ElMessage.error("没有找到此题单");
        router.push("/");
      }
    }

  }
}
const questionid = ref<Studycodemodel.Iquestion[]>([])
function addclick(v: Studycodemodel.Iquestion) {
  questionid.value.push({ ...v, df: 100 })
  ElMessage.success('添加成功')
}

function changequestionid(v) {
  questionid.value = v
}

function removeclick(index: number) {
  questionid.value.splice(index, 1)
}

function change() {
  ruleForm.teamid = undefined;
  ruleForm.team = undefined;
  ruleForm.user = undefined;
  ruleForm.userid = undefined;
}

const dialogVisible2 = ref(false)
function userhandleCurrentChangeuser(data: Studycodemodel.Iuser) {
  ruleForm.userid = data.ID;
  ruleForm.user = data;
  dialogVisible2.value = false;
}
function userhandleCurrentChange(data: Studycodemodel.Iteam) {
  ruleForm.teamid = data.ID;
  ruleForm.team = data;
  dialogVisible2.value = false;
}

onMounted(() => {
  start().then(() => {
    if (ruleForm.questionquestionbank) {
      questionid.value = ruleForm.questionquestionbank
        .sort((v, o) => {
          return Number(v.sortindex) - Number(o.sortindex);
        })
        .map((v) => {
          return { ...v.question, df: v.df };
        }) as Studycodemodel.Iquestionquestionbank[];
    }
  })
})

defineExpose({ ruleForm, questionid })

</script>

<style scoped>
.container-xl {
  min-height: 80vh;
  padding: 24px;
  margin-bottom: 48px;
}

.col-left {
  height: 924.99px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 24px;
  margin-right: 6px;
}

.col-right {
  height: 924.99px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1),
    0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  border-radius: 4px;
  padding: 24px;
  margin-left: 6px;
}

.mydata {
  height: 680px;
  overflow-y: auto;
  overflow-x: hidden;
}

.mydata::-webkit-scrollbar {
  width: 0px;
  height: 1px;
}

.mydata::-webkit-scrollbar-thumb {
  border-radius: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
  background: #535353;
}

.mydata::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 255, 0.3);
  border-radius: 3px;
  background: #ededed;
}

.input {
  display: inline-block;
  width: 246px;
}

.col-center div {
  width: 90px;
}

.container-fluid .row {
  margin-bottom: 12px;
}

.icon-class-var {
  display: none;
}

.list:hover {
  color: var(--color-cheng);
}

.list:hover .icon-class-var {
  display: inline-block;
}
</style>

<style>
.mydata .el-checkbox__label {
  display: none;
}
</style>